<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <title>INSTAR-资料下载</title>
    <link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon">
</head>
<link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}">
<link rel="stylesheet" href="../static/css/download.css" th:href="@{/css/download.css}">
<link rel="stylesheet" href="../static/css/header.css" th:href="@{/css/header.css}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="../static/css/bootstrapValidator.css" th:href="@{/css/bootstrapValidator.css}">
<body>

<!--<div th:replace="_fragments :: loading"></div>-->

<!--------------------头部-begin------------------------------>
<header id="lk_header" th:replace="_fragments :: header(3)">

    <nav class="navbar navbar-expand-lg navbar-light navbar-lk bg-light">
        <div class="container">
            <a class="navbar-brand d-flex justify-content-center align-items-center" href="#">
                <h2 class="mt-2 text-primary"><strong>INSTAR</strong></h2>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#lk_nav"
                    aria-controls="lk_nav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="lk_nav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">产品中心<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://study.163.com/courses-search?keyword=%E6%92%A9%E8%AF%BE#/?ot=5" target="_blank">视频教程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://study.163.com/courses-search?keyword=%E6%92%A9%E8%AF%BE#/?ot=5" target="_blank">资料下载</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="http://www.itlike.com/software/index.html">开源社区</a>
                    </li>

                </ul>
                <form class="form-inline pl-3 pr-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">帖子</span>
                        </div>
                        <input type="text" class="form-control" placeholder="请输入你要搜索的帖子" aria-label="search" aria-describedby="basic-addon1">
                    </div>
                    <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
</header>
<!--------------------头部-end------------------------------>

<!-- 视频部分 -->
<section id="lk_video" class="container mt-5 mb-5">
    <div class="row">
        <!--左半部分-->
        <div class="col-sm-12 col-md-4 col-lg-3 shadow-lg mb-5 bg-white pr-0 pl-0 rounded-left" style="border-right: 3px solid darkgrey">
<!--            <form class="form-inline mt-3 media pr-2 pl-2">-->
<!--                <div class="input-group media-body">-->
<!--                    <input type="text" class="form-control" placeholder="你要搜索的资料" >-->
<!--                </div>-->
<!--                <button class="btn btn-outline-primary" type="submit">Search</button>-->
<!--            </form>-->
            <div class="p-2 mt-1 pl-3 shadow-sm" style="background-color: #aadcff">
                <span style="color: white"><strong>资料下载</strong></span>
                <span style="color: white" class="float-right"><strong> > </strong></span>
            </div>

            <div id="course"  >
                <ul>
                    <li class="pl-3" th:each="mcategory:${mcategories}" onclick="getdatas(this)" id="1" th:id="${mcategory.id}"  th:classappend="${mcategory.id}==1?active"><a  th:text="${mcategory.name}">机器学习理论实验</a></li>
                </ul>

            </div>

        </div>
        <!--右半部分-->
        <div  class="col-sm-12 col-md-8 col-lg-9 bg-light shadow-sm p-3 mb-5 bg-white">

                <div class="row "  >
                    <div class="container-fluid datalist"  th:fragment="datalist">

                    <div class="m-2 pt-3 pb-2 row divider" th:if="${session.user}!=null" th:each="data:${datas}">
                        <div class="col-10">
                            <h5><a href="" th:text="${data.name}">AI实践系统环境及拓展</a></h5>
                            <p style="font-size: 13px" th:text="${data.info}">数据采集、清洗、标注和分类；Python数值计算拓展库；Python数据可视化</p>
                        </div>
                        <div class="col-2">
                            <a href="" th:href="@{${data.data_url}}" target="_blank"><i class="bi bi-download" style="font-size: 2.8rem; color: cornflowerblue;"></i></a>
                        </div>
                    </div>
                    <div class="m-2 pt-3 pb-2 row divider" th:if="${session.user}==null" th:each="data:${datas}">
                            <div class="col-10">
                                <h5><a href="" th:text="${data.name}">AI实践系统环境及拓展</a></h5>
                                <p style="font-size: 13px" th:text="${data.info}">数据采集、清洗、标注和分类；Python数值计算拓展库；Python数据可视化</p>
                            </div>
                            <div class="col-2">
                                <a href="" data-toggle="modal" data-target="#myModal" title="登录后下载" ><i class="bi bi-download" style="font-size: 2.8rem; color: gainsboro;"></i></a>

                            </div>
                        </div>

                    </div>
            </div>

        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">请先登录</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form class="mt-5 mb-5" method="post" th:action="@{/login}">
                        <div class="form-group mt-4">
                            <label for="username">用户名</label>
                            <input type="text" class="form-control" id="username" name="username" aria-describedby="usernamehelp" placeholder="Enter your username">
                        </div>
                        <div class="form-group mt-4">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" name="password" placeholder="Password">
                        </div>
                        <button type="submit" class="btn btn-primary mt-4">登录</button>
                    </form>
                    <div class="mb-4"><span>没有账号？</span><a href="/register" th:href="@{/register}">点我注册</a></div>
                </div>

<!--                &lt;!&ndash; 模态框底部 &ndash;&gt;-->
<!--                <div class="modal-footer">-->
<!--                    <button type="button" class="btn btn-primary">登录</button>-->
<!--&lt;!&ndash;                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>&ndash;&gt;-->
<!--                </div>-->

            </div>
        </div>
    </div>
</section>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<footer th:replace="_fragments :: footer"></footer>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="../static/js/jquery-3.3.1.js"></script>
<script src="../static/js/popper.js"></script>
<script src="../static/js/bootstrap.js"></script>
<!--/*/</th:block>/*/-->

<script src="../static/js/bootstrapValidator.js" th:src="@{/js/bootstrapValidator.js}"></script>
<script>
    var lastactive=1;
    function getdatas(obj) {
        var id=obj.id;
        $.ajax({
            url: 'http://'+HOST+'/material',
            type: 'POST',
            data:{value:id},
            success: function (data) {
                $(".datalist").html(data);
            }
        });
        $("#"+lastactive).removeClass("active");
        $("#"+id).addClass("active");
        lastactive=id;
    }
</script>
<!--用户输入的合法性检查-->
<script>
    $(document).ready(function() {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }
            }
        });
    });

</script>
</body>
</html>